<template>
  <div>
      <div class="top">
          <a href="#" @click="goback"></a>
          <span>{{this.global.userinfo[0].nickname}}</span>
          <router-link to="chatset">
          <img src="../../assets/img/set_1.png" alt="">
          </router-link>
      </div>
      <div class="content">
          <ul>
              <li :class="{'you':(item.type == 'you')}"  v-for="(item,index) in list" :key="index">
               <img src="../../assets/img/user/timg.jpg" alt="">
              <p>{{item.text}}</p>
            </li>
          </ul>
          
          
      </div>

      <div class="footer">
          <ul>
            <div class="bb">
           <img v-if="music" @click="send2" src="../../assets/img/top_1.png" alt="">
           <p  v-if="his" @click="send3">他</p>
           </div>
            <li>
                <input type="text" @input="change()" v-model="msg">
                <img src="../../assets/img/top_2.png" alt="">
                
            </li>
            <div class="aa">
            <span  v-if="sen" @click="send">发送</span>
            <img v-if="jiahao" @click="more" src="../../assets/img/top_3.png" alt="">
            </div>
            <div class="mask1" v-if="mask">
                <li>
                    <img src="../../assets/img/c_1.png" alt="">
                    <span>聊天时间</span>
                </li>
                <li>
                    <img src="../../assets/img/c_2.png" alt="">
                    <span>转账</span>
                </li>
                <li>
                    <img src="../../assets/img/c_3.png" alt="">
                    <span>语音电话</span>
                </li>
                <li>
                    <img src="../../assets/img/c_4.png" alt="">
                    <span>图片</span>
                </li>
                <li>
                    <img src="../../assets/img/c_5.png" alt="">
                    <span>红包</span>
                </li>
            </div>
               </ul>
            
      </div>
  </div>
</template>

<script>
export default {
    data(){
        return{
            list:this.global.list,
            msg:null,
            jiahao:true,
            sen:false,
            his:false,
            music:true,
            mask:false,
        }
    },
    
    methods:{
        goback(){
            this.$router.go("-1")
        },
        more(){
            if(this.mask == false){
                 this.mask = true
            }else{
                 this.mask = false
            }
       
        },
        send(){
            if(this.his == true){

                if(this.msg){
                this.list.push({
                    type:'you',
                    text:this.msg
                })
                this.msg = null
                this.change()
            }
            }else{
                if(this.msg){
                this.list.push({
                    type:'my',
                    text:this.msg
                })
                this.msg = null
                this.change()
            }
            }
            
            
        },
         send1(){
             
         },
         send2(){
             this.music = false,
             this.his = true
         },
         send3(){
             this.music = true,
             this.his = false
         },
         change(){
             if(this.msg){
                 this.sen = true
                 this.jiahao=false
             }else{
                 this.jiahao=true
                 this.sen = false
             }
         }
        
    }
    
}
</script>

<style lang="less" scoped>
.you{
    flex-direction:row!important;
}
.top{
    background-color: #1c81cf;
    display: flex;
    align-items: center;
    height: 40px;
    a{
        width: 20px;
        height: 20px;
        background: url("../../assets/img/left.png")no-repeat;
        background-size: 100%;
    }
    span{
        color: #fff;
        font-size: 12px;
    }
    p{
        margin: 0;
        margin-left: 30%;
        color: #fff; 
    }
    a:nth-child(3){
      margin-left: auto; 
      margin-right: 10px; 
    }
    img{
        width: 30px;
        height: 30px;
        margin-left: auto;
        margin-right: 20px;
    }
}
.content{
    background-color: #f6f6f6;
    height: 600px;
    padding-top: 20px;
    li{
        display: flex;
        height: 60px;
        align-items: center;
        flex-direction: row-reverse;
        img{
            width: 40px;
            height: 40px;
        }
        >p{
            background-color: #3ca1ee;
            max-width: 150px;
            word-wrap: break-word;
            color: #fff;
            font-size: 13px;
            padding: 5px 10px;
            margin: 0px 10px;
        }
    }
}
.footer{

    ul{
    position: fixed;
    bottom: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    background-color: #fff;
    width: 100%;
    justify-content: center;
    padding-bottom: 5px;
    img{
        width: 35px;
        height: 35px;
        }
    .bb{
       width: 10%;
        img{
        width: 35px;
        height: 35px;
        }
    p{
        width: 30px;
        height: 30px;
        line-height: 30px;
        text-align: center;
        background-color: #f6f6f6;
        border: 1px solid #ccc;
        border-radius: 30px;
        font-size: 14px;
        margin: 0px 5px;  
    }
    }
    
    .aa{

        width: 13%;
        margin-left: 5px;
    >span{
        display: block;
        color: #fff;
        width: 50px;
        height: 30px;
        line-height: 30px;
        text-align: center;
        background-color: #3ca1ee;
        margin: 0px 5px;
    }
      }
    >li{
        display: flex;
        align-items: center;
        height: 50px;
        width: 70%;
        border-bottom: 1px solid #3ca1ee;
        input{
            border: none;
            width: 80%;
            text-indent: 1em;
        }
        img{
            margin: 0px 10px;
        }
    }
       }
       .mask1{
           display: flex;
           flex-wrap: wrap;
           margin: 10px 0px;
           width: 100%;
           border-top: 1px solid #ccc;
           li{
               display: flex;
               flex-wrap: wrap;
               justify-content: space-around;
               width: 25%;
               margin-top: 15px;
               img{
                   width: 50px;
                   height: 50px;
               }
                >span{
                width: 100%;
                text-align: center;
                display: block;
                font-size: 13px;
            }
           }
           
       }
}
</style>